<!-- 超值折扣 -->
<template>
	<view class="discount-list" :style="{ height: height + 'px' }">
		<view class="discount-conten">
			<image :src="$Utils.img(bgimg)" style="width: 100%;height: 100%;" :lazy-load="true"></image>
			<view class="discount-goods-box">
				<view v-for="(item, inx) in goodsList" :key="inx" class="goods-item" @click="goodsBtn(item)">
					<image :src="$Utils.img(item.sku_image)" mode="aspectFit" class="goods-item-image" :lazy-load="true"></image>
					<view class="goods-item-title line-text">{{ item.sku_name }}</view>
					<view class="goods-item-price ">￥{{ item.price }}</view>
				</view>
				<!-- <view v-for="(item, inx) in goodsList" :key="inx + 6" class="goods-item">1</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'discount-list',
	data() {
		return {
			goodsList: []
		};
	},
	props: {
		bgimg: {
			type: String,
			default: ''
		},
		height: {
			type: [String, Number],
			default: ''
		},
		link: {
			type: String,
			default: ''
		},
		site_id:{
			type: [Number, String],
			default: 0
		}
	},
	methods: {
		goodsBtn(val) {
			this.$Router.push({
				path: '/shopPages/goods/detaildiscount',
				query: {
					goods_id: val.id,
					is_id: val.sku_id
				}
			});
		}
	},
	mounted() {
		let newObj = {
			app_type: 'h5',
			app_type_name: 'H5',
			web_city: 0,
			topic_id: 1,
			page: 1,
			page_size: 4,
			site_id:this.site_id
		};
		this.$Apis.getTopicGoods(newObj).then(res => {
			this.goodsList = res.list;
		});
	}
};
</script>

<style lang="scss">
.discount-list {
	.discount-conten {
		position: relative;
		width: 100%;
		height: 100%;
		.discount-goods-box {
			display: flex;
			position: absolute;
			bottom: 24rpx;
			left: 50rpx;
		}
		.goods-item {
			width: 150rpx;
			padding: 5rpx 10rpx;
			background-color: #ffffff;
			margin-right: 20rpx;
			border-radius: 20rpx;
		}
		.goods-item-image {
			margin: 0 auto;
			max-width: 100%;
			max-height: 140rpx;
		}
		.goods-item-title {
			padding-left: 10rpx;
			width: 100%;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #222222;
		}
		.goods-item-price {
			padding-left: 10rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ff364e;
		}
	}
}
</style>
